<template>
	<div class="config-project">
		<div class="config-project_header">页面设置</div>
		<div class="config-project_setting">
			<y-form-item :height="20" :width="70" popper="marginB10" title="项目名称">
				<div class="screen-bg_color yinput">
					<y-input :height="20" v-model="projectName"></y-input>
				</div>
			</y-form-item>
			<y-form-item :height="30" :width="70" popper="marginB10" title="项目分组">
				<y-select :options="grouplist" v-model="groupID"></y-select>
			</y-form-item>
			<y-form-item :height="30" :width="70" title="屏幕大小">
				<div class="screen-pixel">
					<y-input-number :max="10000" :min="0" v-model="screenWidth"></y-input-number>
					<y-input-number :max="10000" :min="0" v-model="screenHeight"></y-input-number>
				</div>
			</y-form-item>
			<div class="screen-pixel_title marginB10">
				<div class="ibox"></div>
				<div class="pixel_title">宽度</div>
				<div class="pixel_title paddingL20">高度</div>
			</div>
			<y-form-item :height="20" :width="70" popper="marginB10" title="背景颜色">
				<!-- class="screen-bg_color yinput" -->
				<div>
					<y-color :height="20" v-model="backgroundColor"></y-color>
				</div>
			</y-form-item>
			<y-form-item :height="120" :width="70" popper="marginB10" title="背景图">
				<!-- <div class="screen-bg_image yinput">
          <y-input
            :height="20"
            prevIcon="el-icon-link"
            v-model="backgroundImage"
          ></y-input>
        </div>-->
				<div @click="onBgImageClick" class="screen-bg_img_preview yinput">
					<div class="deleteIcon" @click.stop="deleteImg" v-if="projectDataInfo.backgroundImage">
						<i class="el-icon-delete"></i>
					</div>
					<img
						:src="projectDataInfo.backgroundImage"
						style="height: 100%; width: 100%"
						v-show="projectDataInfo.backgroundImage"
					/>
					<div class="bginfo" v-show="!projectDataInfo.backgroundImage">点击此处设置背景图片</div>
				</div>
			</y-form-item>
			<!-- <y-form-item
        :height="120"
        :width="70"
        popper="marginB10"
        title
      >
        <div
          @click="onBgImageClick"
          class="screen-bg_img_preview yinput"
        >
          <img
            :src="projectDataInfo.backgroundImage"
            height="90"
            v-show="projectDataInfo.backgroundImage"
            width="140"
          />
          <div
            class="screen-bg_block"
            v-show="!projectDataInfo.backgroundImage"
          ></div>
        </div>
      </y-form-item>-->

			<y-form-item :height="108" :width="70" popper="marginB10" title="设置封面">
				<div class="screen-bg_img_thumbnail yinput">
					<img
						:src="projectDataInfo.thumbnailImage"
						style="height: 100%; width: 100%"
						v-show="projectDataInfo.thumbnailImage"
					/>
					<div class="scinfo" v-show="!projectDataInfo.thumbnailImage">
						点击下方的截取封面按钮 <br />
						可以截取当前画布作为封面
					</div>
				</div>
			</y-form-item>
			<y-form-item :height="40" :width="70" popper="marginB25">
				<div class="thumbnail">
					<y-button
						:isLoading="isDoingScreenShot"
						:width="80"
						@click="onScreenCapture"
						class="crop"
						iconClass="el-icon-crop"
						text="截取当前画布作为封面"
					></y-button>
					<!-- <y-button
						text="上传封面"
						:width="80"
						iconClass="el-icon-upload2"
						@click="onUploadImg"
          ></y-button>-->
				</div>
				<input accept="image/*" ref="thumbnailSrc" style="display: none" type="file" />
			</y-form-item>
			<y-form-item :height="20" :width="70" popper="marginB25" title="栅格功能">
				<y-checkbox style="color: #fff" v-model="gridShow">栅格是否显示</y-checkbox>
				<y-input-number :max="100" :min="10" v-model="gridNum" style="margin-top: 10px"></y-input-number>
			</y-form-item>
		</div>
		<y-dialog :isShow="showChooseImgDialog" @close="onChooseImgClose" theme="white" title="选择图片">
			<img-libs unique="config-project" v-if="showChooseImgDialog"></img-libs>
		</y-dialog>
		<y-dialog :isShow="showChooseUploadImgDialog" @close="onChooseUploadImgClose" theme="white" title="选择图片">
			<img-libs unique="config-project_upload" v-if="showChooseUploadImgDialog"></img-libs>
		</y-dialog>
	</div>
</template>

<script>
import { mapState } from 'vuex'
import ImgLibs from '@/components/img-libs/img-libs'
import editorProjectConfig from '@/pages/power-editor/data-model/data-model'
export default {
	data() {
		return {
			gridShow: true,
			screenWidth: 0,
			screenHeight: 0,
			gridNum: 10,
			backgroundColor: '',
			backgroundImage: '',
			showChooseImgDialog: false,
			showChooseUploadImgDialog: false,
			isDoingScreenShot: false,
			projectName: '',
			groupID: '-1',
			grouplist: [{ value: '-1', label: '未分组' }],
		}
	},
	components: {
		ImgLibs,
	},
	mounted() {
		this.initProjectInfo()
		this.fetch_getgroupList()
		this.$bus.$on('select-image', (selectId, url, unique) => {
			if (unique === 'config-project') {
				//
				this.backgroundImage = url
				console.log('[ this.projectDataInfo ]', this.projectDataInfo)
				// this.$store.dispatch('setProjectDataInfo', this.projectDataInfo)
				this.showChooseImgDialog = false
			} else if (unique === 'config-project_upload') {
				this.projectDataInfo.thumbnailImage = url
				this.$store.dispatch('setProjectDataInfo', this.projectDataInfo)
				this.showChooseUploadImgDialog = false
			}
		})
		this.$bus.$on('doneScreenCapture', () => {
			//
			this.isDoingScreenShot = false
		})
	},
	computed: {
		...mapState({
			projectDataInfo: state => state.powereditor.projectDataInfo,
		}),
	},
	watch: {
		gridShow(newValue) {
			this.$bus.$emit('gridShowChange', newValue)
		},
		screenWidth() {
			this.projectDataInfo.screenWidth = this.screenWidth
			this.$store.dispatch('setProjectDataInfo', this.projectDataInfo)
		},
		screenHeight() {
			this.projectDataInfo.screenHeight = this.screenHeight
			this.$store.dispatch('setProjectDataInfo', this.projectDataInfo)
		},
		gridNum() {
			this.$store.commit('setGridNum', this.gridNum)
		},
		backgroundColor() {
			this.projectDataInfo.backgroundColor = this.backgroundColor
			this.$store.dispatch('setProjectDataInfo', this.projectDataInfo)
		},
		backgroundImage() {
			this.projectDataInfo.backgroundImage = this.backgroundImage
			this.$store.dispatch('setProjectDataInfo', this.projectDataInfo)
		},
		projectName() {
			this.projectDataInfo.title = this.projectName
			this.$store.dispatch('setProjectDataInfo', this.projectDataInfo)
		},
		groupID() {
			this.projectDataInfo.groupID = this.groupID
			this.$store.dispatch('setProjectDataInfo', this.projectDataInfo)
		},
	},
	methods: {
		deleteImg() {
			this.backgroundImage = ''
		},
		changegroup(e) {
			console.log(e)
		},
		fetch_getgroupList() {
			this.$axios.get('/grouplist/getlist').then(res => {
				if (res.body && Array.isArray(res.body)) {
					res.body.forEach(item => {
						item.value = item._id
						item.label = item.name
					})
					this.grouplist = [{ value: '-1', label: '未分组' }, ...res.body]
				}
			})
		},
		onBgImageClick() {
			this.showChooseImgDialog = true
		},
		initProjectInfo() {
			let id = this.$route.params.id
			if (id) {
				this.$axios
					.get('/project/detail/' + id)
					.then(res => {
						if (res.code === 200) {
							let project = res.body
							this.initData(project)
						}
					})
					.catch(e => {
						console.warn(e.message)
					})
			} else {
				let project = editorProjectConfig.getProjectConfig()
				this.initData(project)
			}
		},
		initData(project) {
			this.projectName = project.title
			this.groupID = project.groupID
			this.screenWidth = project.screenWidth
			this.screenHeight = project.screenHeight
			this.backgroundColor = project.backgroundColor
			this.backgroundImage = project.backgroundImage
			this.projectDataInfo.groupID = this.groupID
			this.$store.dispatch('setProjectDataInfo', project)
		},
		onChooseImgClose() {
			this.showChooseImgDialog = false
		},
		onChooseUploadImgClose() {
			this.showChooseUploadImgDialog = false
		},
		onUploadImg() {
			this.showChooseUploadImgDialog = true
		},
		/**
		 * 提供截屏作为项目缩略图
		 */
		onScreenCapture() {
			// console.log(111)
			//this.projectInfo.thumbnailImage = res.body;

			this.isDoingScreenShot = true
			this.$bus.$emit('screenCapture')
		},
	},
}
</script>

<style lang="stylus" scoped>
.config-project {
	width: 332px;
	background: rgb(28, 32, 38);
	font-size: 12px;
	height: 500px;
	.config-project_header {
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
		height: 30px;
		color: #bcc9d4;
		background: rgb(46, 52, 60);
	}
	.config-project_setting {
		padding: 10px 20px;
		.screen-pixel {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
		.screen-pixel_title {
			display: flex;
			flex-direction: row;
			.ibox {
				width: 70px;
			}
			.pixel_title {
				flex: 1;
				font-size: 12px;
				color: rgb(92, 99, 102);
			}
		}
		.yinput {
			border: 1px solid #000;
		}
		.screen-bg_img_preview {
			position: relative;
			height: 120px;
			width: 100%;
			background: rgb(38, 44, 51);
			display: flex;
			justify-content: center;
			align-items: center;
			// padding: 2px 15px;
			cursor: pointer;
		}
		.thumbnail {
			display: flex;
			width: 100%;
			div {
				flex: 1;
			}
			.crop {
				border: 1px solid rgb(38, 129, 255);
				background: none;
				&:hover {
					background: rgba(38, 129, 255, 0.8);
				}
			}
		}
		.screen-bg_img_thumbnail {
			width: 100%;
			height: 100%;
			text-align: center;
		}
		.screen-bg_block {
			display: inline-block;
			width: 100%;
			height: 100%;
			background: rgb(14, 42, 67);
		}
	}
}
.bginfo {
	color: #999;
	text-align: center;
	vertical-align: middle;
}
.scinfo {
	color: #999;
	text-align: center;
	padding-top: 35px;
	line-height: 20px;
}
.deleteIcon {
	position: absolute;
	color: #fff;
	top: 5px;
	right: 10px;
	z-index: 10;
}
</style>
